import { FC, memo, useEffect } from 'react';
import { Card, Tooltip } from 'antd';
import { CaretDownOutlined, CaretUpOutlined, InfoCircleOutlined } from '@ant-design/icons';

import './DataCard.scss';
import { CommonProps, thousandFormat } from './utils';

interface DataCardProps extends CommonProps {
  /** 总销售额 */
  totalSales: number;

  /** 周同比 */
  weekBasis: number;

  /** 日同比 */
  dayBasis: number;

  /** 日销售额 */
  daySales: number;
}

export const DataCard: FC<DataCardProps> = memo((props: DataCardProps) => {
  return (
    <Card variant="borderless" className="card-sales">
      <div className="card-sales-title">
        总销售额
        <span className="card-sales-title-icon">
          <Tooltip title="指标说明">
            <InfoCircleOutlined
              onClick={() => {
                props.triggerEvent('onClick');
                props.state.totalSales += 2;
              }}
            />
          </Tooltip>
        </span>
      </div>
      <div className="card-sales-content">¥ {thousandFormat(props.totalSales)}</div>
      <div className="card-sales-sub-content">
        <div>
          周同比 {Math.abs(props.weekBasis * 100).toFixed(0)}%
          <span className={props.weekBasis >= 0 ? 'card-sales-up' : 'card-sales-down'}>
            {props.weekBasis >= 0 ? <CaretUpOutlined /> : <CaretDownOutlined />}
          </span>
        </div>
        <div>
          日同比 {Math.abs(props.dayBasis * 100).toFixed(0)}%
          <span className={props.dayBasis >= 0 ? 'card-sales-up' : 'card-sales-down'}>
            {props.dayBasis >= 0 ? <CaretUpOutlined /> : <CaretDownOutlined />}
          </span>
        </div>
      </div>
      <div className="card-sales-bottom">日销售额 ￥{thousandFormat(props.daySales)}</div>
    </Card>
  );
});
